<template>
	<p>{{ msg }}</p>
</template>

<script setup>
import { ref, onBeforeMount, onMounted } from 'vue'
const msg = ref('Hello World')
const arr = ref([])
// 设置生命周期钩子
// 组件挂在前：只存在数据，不存在视图的
onBeforeMount(() => {
	// 自己的操作，比如：可以发请求拿到所有表格数据
	console.log('挂载前')
	console.log(msg.value) // Hello World
	console.log('在这里发请求获取arr数据')
	console.log(document.getElementsByTagName('p')[0]) // undefined
})
// 挂载完成后：数据和视图都存在
onMounted(() => {
	console.log('挂载完成后')
	console.log(msg.value) // Hello World
	console.log(document.getElementsByTagName('p')[0]) // 已经存在
})
</script>

<style scoped>
	
</style>